{% extends 'base.html' %}
{% block header %}新增菜单{% endblock %}
{% block content %}
<h2>新增菜单</h2>
<form method="post">
    {% csrf_token %}
    <div class="form-group">
        <label for="name">名称</label>
        <input type="text" name="name" id="name" class="form-control" required>
    </div>
    <div class="form-group">
        <label for="permission">显示权限</label>
        <select name="permission" id="permission" class="form-select">
            <option value="0">全部</option>
            <option value="1">仅管理员</option>
            <option value="2">仅普通用户</option>
            <option value="3">仅配置用户</option>
            <option value="4">仅配置用户与管理员</option>
            <option value="5">仅管理员与普通用户</option>
        </select>
    </div>
    <div class="form-group">
        <label for="status">是否显示</label>
        <select name="status" id="status" class="form-select">
            <option value="1">显示</option>
            <option value="0">隐藏</option>
        </select>
    </div>
        <div class="form-group">
                <label>图标</label>
                <div class="input-group mb-2">
                        <input type="text" name="icon" id="icon" class="form-control" readonly placeholder="请选择图标">
                        <button type="button" class="btn btn-outline-primary" id="icon-modal-btn">选择</button>
                </div>
        </div>
        <!-- 图标选择弹框 -->
        <div class="modal fade" id="iconModal" tabindex="-1" aria-labelledby="iconModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="iconModalLabel">选择图标</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
                    </div>
                    <div class="modal-body">
                        <div id="icon-modal-grid" class="container-fluid"></div>
                        <div class="d-flex justify-content-between mt-2">
                            <button type="button" class="btn btn-outline-secondary" id="icon-modal-prev">上一页</button>
                            <button type="button" class="btn btn-outline-secondary" id="icon-modal-next">下一页</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
        <script>
        const menuIcons = [
            'bi-house','bi-person','bi-card-list','bi-gear','bi-list-task','bi-exclamation-circle','bi-box','bi-menu-button','bi-currency-yen','bi-building',
            'bi-calendar','bi-chat','bi-cloud','bi-envelope','bi-file-earmark','bi-flag','bi-globe','bi-heart','bi-lightning','bi-lock'
        ];
        const menuIconsPerRow = 5, menuRowsPerPage = 4;
        const menuIconsPerPage = menuIconsPerRow * menuRowsPerPage;
        let menuIconPage = 0;
        function renderMenuIconModal() {
            const grid = document.getElementById('icon-modal-grid');
            grid.innerHTML = '';
            const start = menuIconPage * menuIconsPerPage;
            const end = Math.min(start + menuIconsPerPage, menuIcons.length);
            for(let i = start; i < end; i += menuIconsPerRow) {
                const row = document.createElement('div');
                row.className = 'row mb-2';
                for(let j = i; j < Math.min(i+menuIconsPerRow, end); j++) {
                    const col = document.createElement('div');
                    col.className = 'col text-center';
                    col.innerHTML = `<i class='bi ${menuIcons[j]} fs-3' style='cursor:pointer;'></i><div class='small'>${menuIcons[j]}</div>`;
                    col.onclick = function() {
                        document.getElementById('icon').value = menuIcons[j];
                        bootstrap.Modal.getOrCreateInstance(document.getElementById('iconModal')).hide();
                    };
                    row.appendChild(col);
                }
                grid.appendChild(row);
            }
        }
        document.getElementById('icon-modal-btn').onclick = function() {
            renderMenuIconModal();
            bootstrap.Modal.getOrCreateInstance(document.getElementById('iconModal')).show();
        };
        document.getElementById('icon-modal-prev').onclick = function() {
            if(menuIconPage > 0) { menuIconPage--; renderMenuIconModal(); }
        };
        document.getElementById('icon-modal-next').onclick = function() {
            if((menuIconPage+1)*menuIconsPerPage < menuIcons.length) { menuIconPage++; renderMenuIconModal(); }
        };
        </script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
    <script>
    const icons = [
        'bi-house','bi-person','bi-card-list','bi-gear','bi-list-task','bi-exclamation-circle','bi-box','bi-menu-button','bi-currency-yen','bi-building',
        'bi-calendar','bi-chat','bi-cloud','bi-envelope','bi-file-earmark','bi-flag','bi-globe','bi-heart','bi-lightning','bi-lock','bi-star','bi-tools','bi-trophy','bi-wallet','bi-wifi','bi-x','bi-check','bi-search','bi-pencil','bi-trash','bi-upload','bi-download','bi-arrow-left','bi-arrow-right','bi-arrow-up','bi-arrow-down','bi-bar-chart','bi-book','bi-camera','bi-clock','bi-compass','bi-cup','bi-gift','bi-image','bi-key','bi-link','bi-list','bi-map','bi-music','bi-palette','bi-phone','bi-printer','bi-receipt','bi-shield','bi-tag','bi-thermometer','bi-tree','bi-truck','bi-umbrella','bi-unlock','bi-user','bi-vector','bi-volume','bi-watch','bi-window','bi-wrench'
    ];
    const iconsPerRow = 5, rowsPerPage = 4;
    const iconsPerPage = iconsPerRow * rowsPerPage;
    let iconPage = 0;
    function renderIcons() {
        const grid = document.getElementById('icon-preview-grid');
        grid.innerHTML = '';
        const start = iconPage * iconsPerPage;
        const end = Math.min(start + iconsPerPage, icons.length);
        for(let i = start; i < end; i += iconsPerRow) {
            const row = document.createElement('div');
            row.className = 'row mb-2';
            for(let j = i; j < Math.min(i+iconsPerRow, end); j++) {
                const col = document.createElement('div');
                col.className = 'col text-center';
                col.innerHTML = `<i class="bi ${icons[j]} fs-2" style="cursor:pointer;"></i><div class="small">${icons[j]}</div>`;
                col.onclick = function() {
                    document.getElementById('icon').value = icons[j];
                    Array.from(grid.querySelectorAll('.selected')).forEach(e=>e.classList.remove('selected'));
                    col.classList.add('selected');
                };
                row.appendChild(col);
            }
            grid.appendChild(row);
        }
    }
    document.getElementById('icon-prev').onclick = function() {
        if(iconPage > 0) { iconPage--; renderIcons(); }
    };
    document.getElementById('icon-next').onclick = function() {
        if((iconPage+1)*iconsPerPage < icons.length) { iconPage++; renderIcons(); }
    };
    renderIcons();
    </script>
    <div class="form-group">
        <label for="url">链接</label>
        <input type="text" name="url" id="url" class="form-control">
    </div>
    <div class="form-group">
        <label for="order">排序</label>
        <input type="number" name="order" id="order" class="form-control" value="0">
    </div>
    <div class="form-group">
        <label for="parent">父菜单</label>
        <select name="parent" id="parent" class="form-select">
            <option value="">无</option>
            {% for parent in parents %}
            <option value="{{ parent.id }}">{{ parent.name }}</option>
            {% endfor %}
        </select>
    </div>
    <div class="form-group">
        <label for="remark">备注</label>
        <input type="text" name="remark" id="remark" class="form-control">
    </div>
    <button type="submit" class="btn btn-success">提交</button>
    <a href="/menu/" class="btn btn-secondary">取消</a>
</form>
{% endblock %}
